<script setup>
import {markRaw, ref, toRaw} from 'vue';
import {useRouter} from 'vue-router';
import axios, {Axios} from "axios";
import {useUserStore} from "@/store/user";
import {uploadImage} from "@/api/image";
import {createBlog} from "@/api/blog";
import {Toast} from "vant";

const router = useRouter();

// 博客数据
const blog = ref({
  title: '',
  content: '',
  coverImage: '',
  tags: []
});

// 标签输入
const tagInput = ref('');
// 封面图片列表
const coverImageList = ref([]);

const userStore = useUserStore()
// 封面图片上传处理
const afterRead = async (file) => {
  // const formData = new FormData();
  // formData.append('file', file.file);
  // const res = await axios.post('http://localhost:8123/api/img/upload', formData, {
  //   params: {
  //     id: userStore.id
  //   }
  // });
  const res = await uploadImage(file.file)
  blog.value.coverImage = res
};

// 添加标签
const addBlogTag = () => {
  if (tagInput.value.trim()) {
    blog.value.tags.push(tagInput.value.trim());
    tagInput.value = '';
  }
};

// 删除标签
const delBlogTag = (tag) => {
  blog.value.tags = blog.value.tags.filter(item => item !== tag);
};

const onCreateBlog = async () => {
  console.log(userStore.id)
  await createBlog(blog.value.title, blog.value.content, markRaw(blog.value.tags), blog.value.coverImage, userStore.id)
  Toast("发布成功")
  router.push("/blog")
}


</script>
<template>

  <van-nav-bar
      :title="$route.name"
      left-arrow
      @click-left="router.back()"
  />
  <div class="blog-editor-container">
    <van-field
        v-model="blog.title"
        label="标题"
        placeholder="请输入博客标题"
    />

    <div class="cover-image-uploader">
      <span>封面图片</span>
      <van-uploader
          v-model="coverImageList"
          multiple
          :max-size="500 * 1024 * 1024"
          :max-count="1"
          :after-read="afterRead"/>
    </div>

    <van-field
        v-model="tagInput"
        label="标签"
        placeholder="请输入博客标签，回车添加"
        @keydown.enter="addBlogTag"
    />

    <div class="selected-tags">
      <span>已选标签</span>
      <div class="tags-container">
        <van-tag
            v-for="tag in blog.tags"
            :key="tag"
            @close="delBlogTag(tag)"
            plain
            closeable
            color="#ffe1e1"
            text-color="#ad0000"
        >
          {{ tag }}
        </van-tag>
      </div>
    </div>

    <div class="editor-wrapper">
      <textarea
          v-model="blog.content"
          class="markdown-editor"
          placeholder="请输入博客内容..."
      ></textarea>
    </div>

    <div class="publish-button">
      <van-button
          type="success"
          @click="onCreateBlog"
      >
        发布博客
      </van-button>
    </div>
  </div>
</template>


<style scoped>
.blog-editor-container {
  padding: 16px;
  max-width: 800px;
  margin: 0 auto;
}

.cover-image-uploader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 8px;
}

.selected-tags {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 16px;
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 8px;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.editor-wrapper {
  margin: 16px 0;
}

.markdown-editor {
  width: 100%;
  min-height: 400px;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 8px;
  resize: vertical;
  font-size: 14px;
}

.publish-button {
  text-align: center;
  margin-top: 20px;
}

.publish-button .van-button {
  width: 200px;
}
</style>
